<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	<body>
		<div id="app">
			<!-- 需求: 将数据字母进行反转 abc 反转之后 cba
				 方法: 将数据拆分为数组,将数组进行反转,再将数组合并为字符串
				 函数:
						1.split 拆分
						2.reverse 反转数据
						3.join('') 将数组转化为字符串
			 -->
			 用户输入: <input v-model="msg"/><br>
			 数据展现: {{msg.split('').reverse().join('')}}<br>
			 <!-- 
				计算属性用法: 
				将需要计算的操作通过特定的方法先行计算之后将结果进行展现
				使用场景: 如果数据需要大量的计算 可以使用计算属性实现.
			 -->
			 计算属性: {{reverse}}
			 <hr />
			 <!-- 面试题: 计算属性与方法的区别
				1.计算属性如果调用多次,则有缓存的机制 只计算一次.
				2.方法调用没有缓存机制,所以调用多次,则计算多次.
				如果一个计算重复调用时首选计算属性.
			  -->
			 <!-- 计算属性 -->
			 {{reverse}} {{reverse}}<br>
			 <!-- 将方法的计算结果,在该位置进行展现.所以需要return-->
			 {{reverseMe2()}}{{reverseMe2()}}{{reverseMe2()}}
			 <!-- <button @click="reverseMe">调用方法</button> -->
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					msg: 'abcdefg'
				},
				//定义计算属性
				computed: {
					//定义一个方法,要求必须有返回值!!
					reverse(){
						console.log("计算属性执行")
						return this.msg.split('').reverse().join('')
					}
				},
				methods: {
					reverseMe(){
						console.log("方法执行")
						this.msg = this.msg.split('').reverse().join('')
					},
					reverseMe2(){
						console.log("方法执行")
						return this.msg.split('').reverse().join('')
					}
				}
			}) 
		</script>
	</body>
</html>